import { getHospitalDetailRequest } from "@/api/hospital/hospitalList";
import { getHospitalDetailType } from "@/api/hospital/model/hospitalListType";
import { Button, Card, Descriptions } from "antd";
import React, { useEffect, useState } from "react";
import { useNavigate, useParams } from "react-router-dom";

export default function HospitalDetail() {
  const navigate = useNavigate()
  // 拿到id
  const { id } = useParams();
  //设置打开页面请求到的数据
  const [reqHosDetail, setReqHosDetail] = useState<getHospitalDetailType>({});

  useEffect(() => {
    const getHospitalDetail = async () => {
      const result = await getHospitalDetailRequest(id as string);
      // console.log(result);
      setReqHosDetail(result);
    };
    getHospitalDetail();
  }, []);
  //点击返回按钮页面跳转
  const goBackLastHandle =() =>{
    navigate(-1)
  }
  return (
    <div>
      <Card>
        <Descriptions title="基本信息" bordered column={2}>
          <Descriptions.Item label="医院名称">
            {reqHosDetail.hospital?.hosname}
          </Descriptions.Item>
          <Descriptions.Item label="医院Logo">
            {reqHosDetail.hospital?.logoData ? (
              <img
                style={{ width: "100px" }}
                src={`data:image/jpeg;base64,${reqHosDetail.hospital?.logoData}`}
                alt=""
              />
            ) : (
              ""
            )}
          </Descriptions.Item>
          <Descriptions.Item label="医院编码">
            {reqHosDetail.hospital?.hoscode}
          </Descriptions.Item>
          <Descriptions.Item label="医院地址">
            {reqHosDetail.hospital?.param.fullAddress}
          </Descriptions.Item>
          <Descriptions.Item label="坐车路线" span={2}>
          {reqHosDetail.hospital?.route}
          </Descriptions.Item>
          <Descriptions.Item label="医院简介" span={2}>
          {reqHosDetail.hospital?.intro}
          </Descriptions.Item>
        </Descriptions>
        <Descriptions
          title="预约规则信息"
          bordered
          column={2}
          style={{ marginTop: "25px" }}
        >
          <Descriptions.Item label="预约周期">{reqHosDetail.bookingRule?.cycle}</Descriptions.Item>
          <Descriptions.Item label="放号时间">{reqHosDetail.bookingRule?.releaseTime}</Descriptions.Item>
          <Descriptions.Item label="停挂时间">{reqHosDetail.bookingRule?.stopTime}</Descriptions.Item>
          <Descriptions.Item label="退号时间">{reqHosDetail.bookingRule?.quitTime}</Descriptions.Item>
          <Descriptions.Item label="预约规则" span={2}>
          {reqHosDetail.bookingRule?.rule.map((item,index)=><p key={index}>{item}</p>)}
          </Descriptions.Item>
        </Descriptions>
        <Button style={{ marginTop: "15px" }} onClick={goBackLastHandle}>返回</Button>
      </Card>
    </div>
  );
}
